<div class="cd-navbar-top">
  <nav class="navbar navbar-expand-md navbar-dark cd-navbar-brand">
    <a class="navbar-brand mt-3 mb-2 ml-2"
       href="#">
      <img src="assets/Ceph_Logo_Standard_RGB_White_120411_fa.png"
           alt="Ceph" />
    </a>

    <button type="button"
            class="navbar-toggler"
            (click)="isCollapsed = !isCollapsed">
      <span i18n
            class="sr-only">Toggle navigation</span>
      <span class="">
        <i class="fa fa-navicon fa-lg"></i>
      </span>
    </button>

    <div class="collapse navbar-collapse"
         [collapse]="isCollapsed">
      <ul class="navbar-nav mt-2 cd-navbar-primary d-block d-md-none">
        <ng-container *ngTemplateOutlet="cd_menu"> </ng-container>
      </ul>

      <ul class="nav navbar-nav cd-navbar-utility my-2 my-md-0">
        <ng-container *ngTemplateOutlet="cd_utilities"> </ng-container>
      </ul>

    </div>
  </nav>

  <nav class="navbar navbar-expand-md navbar-dark cd-navbar-main pb-0 pl-0 d-none d-md-flex">
    <ul class="navbar-nav mr-auto my-0 cd-navbar-primary ">
      <ng-container *ngTemplateOutlet="cd_menu"> </ng-container>
    </ul>
  </nav>
</div>

<ng-template #cd_utilities>
  <li class="nav-item ">
    <cd-language-selector class="cd-navbar"></cd-language-selector>
  </li>
  <li class="nav-item ">
    <cd-notifications class="cd-navbar"></cd-notifications>
  </li>
  <li class="nav-item ">
    <cd-dashboard-help class="cd-navbar"></cd-dashboard-help>
  </li>
  <li class="nav-item ">
    <cd-administration class="cd-navbar"></cd-administration>
  </li>
  <li class="nav-item ">
    <cd-identity class="cd-navbar"></cd-identity>
  </li>
</ng-template>

<ng-template #cd_menu>
  <!-- Dashboard -->
  <li routerLinkActive="active"
      class="nav-item tc_menuitem_dashboard">
    <a routerLink="/dashboard"
       class="nav-link">
      <i [ngClass]="[icons.health]"
         [ngStyle]="summaryData?.health_status | healthColor"></i>
      <span i18n>Dashboard</span>
    </a>
  </li>

  <!-- Cluster -->
  <li dropdown
      routerLinkActive="active"
      class="nav-item dropdown tc_menuitem_cluster"
      *ngIf="
      permissions.hosts.read ||
      permissions.monitor.read ||
      permissions.osd.read ||
      permissions.configOpt.read">
    <a dropdownToggle
       class="nav-link dropdown-toggle"
       data-toggle="dropdown">
      <ng-container i18n>Cluster</ng-container>
    </a>
    <ul *dropdownMenu
        class="dropdown-menu">
      <li routerLinkActive="active"
          class="tc_submenuitem tc_submenuitem_hosts"
          *ngIf="permissions.hosts.read">
        <a i18n
           class="dropdown-item"
           routerLink="/hosts">Hosts</a>
      </li>
      <li routerLinkActive="active"
          class="tc_submenuitem tc_submenuitem_cluster_inventory"
          *ngIf="permissions.hosts.read">
        <a i18n
           class="dropdown-item"
           routerLink="/inventory">Inventory</a>
      </li>
      <li routerLinkActive="active"
          class="tc_submenuitem tc_submenuitem_cluster_monitor"
          *ngIf="permissions.monitor.read">
        <a i18n
           class="dropdown-item"
           routerLink="/monitor/">Monitors</a>
      </li>
      <li routerLinkActive="active"
          class="tc_submenuitem tc_submenuitem_cluster_services"
          *ngIf="permissions.hosts.read">
        <a i18n
           class="dropdown-item"
           routerLink="/services/">Services</a>
      </li>
      <li routerLinkActive="active"
          class="tc_submenuitem tc_submenuitem_hosts"
          *ngIf="permissions.osd.read">
        <a i18n
           class="dropdown-item"
           routerLink="/osd">OSDs</a>
      </li>
      <li routerLinkActive="active"
          class="tc_submenuitem tc_submenuitem_configuration"
          *ngIf="permissions.configOpt.read">
        <a i18n
           class="dropdown-item"
           routerLink="/configuration">Configuration</a>
      </li>
      <li routerLinkActive="active"
          class="tc_submenuitem tc_submenuitem_crush"
          *ngIf="permissions.hosts.read && permissions.osd.read">
        <a i18n
           class="dropdown-item"
           routerLink="/crush-map">CRUSH map</a>
      </li>
      <li routerLinkActive="active"
          class="tc_submenuitem tc_submenuitem_modules"
          *ngIf="permissions.configOpt.read">
        <a i18n
           class="dropdown-item"
           routerLink="/mgr-modules">Manager modules</a>
      </li>
      <li routerLinkActive="active"
          class="tc_submenuitem tc_submenuitem_log"
          *ngIf="permissions.log.read">
        <a i18n
           class="dropdown-item"
           routerLink="/logs">Logs</a>
      </li>
      <li routerLinkActive="active"
          class="tc_submenuitem tc_submenuitem_prometheus"
          *ngIf="prometheusConfigured && permissions.prometheus.read">
        <a i18n
           class="dropdown-item"
           routerLink="/alerts">Alerts</a>
      </li>
      <li routerLinkActive="active"
          class="tc_submenuitem tc_submenuitem_prometheus"
          *ngIf="prometheusConfigured && permissions.prometheus.read">
        <a i18n
           class="dropdown-item"
           routerLink="/silence">Silences</a>
      </li>
    </ul>
  </li>

  <!-- Pools -->
  <li routerLinkActive="active"
      class="nav-item tc_menuitem_pool"
      *ngIf="permissions.pool.read">
    <a class="nav-link"
       i18n
       routerLink="/pool">Pools</a>
  </li>

  <!-- Block -->
  <li dropdown
      routerLinkActive="active"
      class="nav-item dropdown tc_menuitem_block"
      *ngIf="permissions.rbdImage.read || permissions.rbdMirroring.read || permissions.iscsi.read">
    <a dropdownToggle
       class="nav-link dropdown-toggle"
       data-toggle="dropdown"
       [ngStyle]="blockHealthColor()">
      <ng-container i18n>Block</ng-container>
    </a>

    <ul *dropdownMenu
        class="dropdown-menu">
      <li routerLinkActive="active"
          *ngIf="permissions.rbdImage.read">
        <a i18n
           class="dropdown-item"
           routerLink="/block/rbd">Images</a>
      </li>

      <li routerLinkActive="active"
          class="tc_submenuitem tc_submenuitem_block_mirroring"
          *ngIf="permissions.rbdMirroring.read">
        <a class="dropdown-item"
           routerLink="/block/mirroring">
          <ng-container i18n>Mirroring</ng-container>
          <small *ngIf="summaryData?.rbd_mirroring?.warnings !== 0"
                 class="badge badge-warning">{{ summaryData?.rbd_mirroring?.warnings }}</small>
          <small *ngIf="summaryData?.rbd_mirroring?.errors !== 0"
                 class="badge badge-danger">{{ summaryData?.rbd_mirroring?.errors }}</small>
        </a>
      </li>

      <li routerLinkActive="active"
          *ngIf="permissions.iscsi.read">
        <a i18n
           class="dropdown-item"
           routerLink="/block/iscsi">iSCSI</a>
      </li>
    </ul>
  </li>

  <!-- NFS -->
  <li routerLinkActive="active"
      class="item tc_menuitem_nfs"
      *ngIf="permissions?.nfs?.read">
    <a i18n
       class="nav-link"
       routerLink="/nfs">NFS</a>
  </li>

  <!-- Filesystem -->
  <li routerLinkActive="active"
      class="nav-item tc_menuitem_cephs"
      *ngIf="permissions.cephfs.read">
    <a i18n
       class="nav-link"
       routerLink="/cephfs">Filesystems</a>
  </li>

  <!-- Object Gateway -->
  <li dropdown
      routerLinkActive="active"
      class="nav-item dropdown tc_menuitem_rgw"
      *ngIf="permissions.rgw.read">
    <a dropdownToggle
       class="nav-link dropdown-toggle"
       data-toggle="dropdown">
      <ng-container i18n>Object Gateway</ng-container>
    </a>
    <ul *dropdownMenu
        class="dropdown-menu">
      <li routerLinkActive="active"
          class="tc_submenuitem tc_submenuitem_rgw_daemons">
        <a i18n
           class="dropdown-item"
           routerLink="/rgw/daemon">Daemons</a>
      </li>
      <li routerLinkActive="active"
          class="tc_submenuitem tc_submenuitem_rgw_users">
        <a i18n
           class="dropdown-item"
           routerLink="/rgw/user">Users</a>
      </li>
      <li routerLinkActive="active"
          class="tc_submenuitem tc_submenuitem_rgw_buckets">
        <a i18n
           class="dropdown-item"
           routerLink="/rgw/bucket">Buckets</a>
      </li>
    </ul>
  </li>
</ng-template>
